<template>
  <div class="page-content">
    <el-card class="box-card">
      <div class="header">
        <div class="title">{{ pageContentConfigs.header.title }}</div>
        <el-button type="primary" icon="Plus" @click="handleAdd">{{
          pageContentConfigs.header.addBtntext
        }}</el-button>
      </div>
      <el-table :data="pageTabs" stripe border style="width: 100%">
        <template v-for="item in pageContentConfigs.tableItems" :key="item.prop">
          <template v-if="item.type === 'config'">
            <el-table-column align="center" label="配置选项">
              <template #default="scoped">
                <el-button type="primary" icon="Edit" @click="handleEntrie(scoped.row)"
                  >编辑</el-button
                >
                <el-button type="danger" icon="Delete" @click="handleDelete(scoped)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'constom'">
            <el-table-column align="center" v-bind="item">
              <template #default="scoped">
                <slot v-bind="scoped"></slot>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column align="center" v-bind="item" />
          </template>
        </template>
      </el-table>
      <div class="footer">
        <el-pagination
          v-model:current-page="currPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 8, 10]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import useBaseStore from '@/store/main';
import { storeToRefs } from 'pinia';
import { ref, watch } from 'vue';

const emit = defineEmits(['onAdd', 'onEdit']);

interface Iprops {
  pageName: string;
  pageContentConfigs: {
    mainMenuName?: string;
    checkName?: string;
    header: {
      title: string;
      addBtntext: string;
    };
    tableItems: any[];
  };
}

// 分页器的逻辑
const currPage = ref(1);
const pageSize = ref(10);

const props = defineProps<Iprops>();

const baseStore = useBaseStore();
const getpageTableList = (pageName: string, payload?: any, page: number = 1, size: number = 10) => {
  const offset = (page - 1) * size;
  const limit = size;
  baseStore.feachPageTablesAction(
    pageName,
    props.pageContentConfigs.mainMenuName ?? 'baseInfo',
    props.pageContentConfigs.checkName ?? '',
    payload,
    limit,
    offset
  );
};

getpageTableList(props.pageName);
const { pageTabs, total } = storeToRefs(baseStore);

const handleDelete = (payload: any) => {
  pageTabs.value.splice(payload.$index, 1);
};

const handleEntrie = (payload: any) => {
  emit('onEdit', payload);
};

const handleAdd = () => {
  emit('onAdd');
};

watch(currPage, () => {
  getpageTableList(props.pageName, null, currPage.value, pageSize.value);
});

watch(pageSize, () => {
  getpageTableList(props.pageName, null, currPage.value, pageSize.value);
});

defineExpose({
  getpageTableList
});
</script>

<style lang="less" scoped>
.page-content {
  margin-top: 15px;

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .title {
      font-weight: 600;
      font-size: 20px;
    }
  }
}
</style>
